<template>
  <div>
    <el-row class="zrjk__top">
      <el-col :span="4">
        <el-date-picker v-model="zj.timeDur" type="daterange" placeholder="选择日期范围" @change="getTableData">
        </el-date-picker>
      </el-col>
      <el-col :span="6":push="12">
        <el-button v-for="item in kfGroup.options" :key="item.value" :class="kfGroup.value === item.value ?'active' : ''" @click="handleChangeGroup(item.value)" v-text="item.label">
        </el-button>
      </el-col>
    </el-row>
    <div class="tWrapper">
      <el-table :data="zj.tableData" style="width: 100%">
        <el-table-column v-for="item in zj.titleList" :key="item.label" :prop="item.prop" :label="item.label">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { dateFormat } from 'vux'
export default {
  name: 'zj-report',
  data() {
    const nowDate = new Date()
    const ztDate = nowDate.setDate(nowDate.getDate() - 1)
    const timeDur = [ztDate,ztDate]
    return {
      kfGroup: {
        value: 104,
        options: [
          { label: '业务组', value: 104 },
          { label: '答疑组', value: 100 },
          { label: '回访组', value: 112 },
        ]
      },
      // 添加参数
      zj: {
        timeDur,
        tableData: [],
        titleList: [
          {
            prop: 'UserName',
            label: '客服姓名',
          },
          {
            prop: 'zcount',
            label: '通话总数',
          },
          {
            prop: 'zcount_callin',
            label: '呼入量',
          },
          {
            prop: 'zcount_callout',
            label: '呼出量',
          },
          {
            prop: 'zcount_zscpj',
            label: '平均通话时长',
          },
          {
            prop: 'pj',
            label: '平均分',
          },
          {
            prop: 'da',
            label: '最高分',
          },
          {
            prop: 'xiao',
            label: '最低分',
          },
          {
            prop: 'num',
            label: '转工单处理数',
          },
          {
            prop: 'jtl',
            label: '接通率',
          },
        ],
      },
    }
  },
  mounted(){
    this.getTableData()
  },
  methods:{
    handleChangeGroup(gid) {
      this.kfGroup.value = gid
      this.getTableData()
      // this.handleCurrentChange(1)
    },
    async getTableData() {
      const timeDur = this.zj.timeDur
      const groupId = this.kfGroup.value
      console.log('timeDur:',timeDur)
      if(timeDur.length && timeDur.every(item=>item === null)){
        this.$toast({
          message:'请填写日期'
        })
        return
      }
      // const {id ,userName} = this.cuUserInfo
      try{
        const {data} = await this.$get(this,{
          api:'ajaxapi/zjbb.do',
          data:{
            st:timeDur && dateFormat(timeDur[0], 'YYYY-MM-DD'),
            et:timeDur && dateFormat(timeDur[1], 'YYYY-MM-DD'),
            groupId,
            kfid:'',
            kfName:'',
          }
        })
        if(data.state === 0){
          this.zj.tableData = data.content
          return
        }
        this.$warn('ajaxapi/zjbb.do接口数据异常')
        console.log('ajaxapi/zjbb.do数据异常:',data.message)
      }catch(e){
        this.$warn('ajaxapi/zjbb.do接口响应报错')
        console.log('ajaxapi/zjbb.do响应报错:',e.message)
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.zrjk__top {
  $btmBorderColor: #bac2cb;
  $btnDftBgColor: #ecf0f3;
  $btnDftColor: #bac2cb;
  $btnChgBgColor: #5394fc;
  $btnChgColor: #fff;
  padding: 20px 23px;
  // border: 1px solid $btmBorderColor;
  // border-bottom: none;
  background: $btnChgColor;
  text-align: right;
  .el-button {
    padding: 11px 29px;
    color: $btnDftColor;
    background: $btnDftBgColor;
    border: none;
    transition: all .3s;
    &:hover {
      color: $btnChgColor;
      background: $btnChgBgColor;
    }
    &.active {
      color: $btnChgColor;
      background: $btnChgBgColor;
    }
  }
}
</style>

